<template>
  <div>
    <div class="content">
      <div class="tops">
        <h2>开盘日历</h2>
        <div>
          <span>查看全部 <i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
      <div class="calendar">
        <el-steps direction="vertical" :active="1">
          <el-step
            :title="new Date(item.time).toLocaleDateString()"
            :description="item.title"
            v-for="(item, index) in titlecalendarlist"
            :key="index"
          ></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import { Getproperties } from "@/api/index.js";
export default {
  data() {
    return {
      titlecalendarlist: [
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
        {
          time: "10月16日",
          title: "[城西]家逸园17500元/㎡",
        },
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
        {
          time: "11月30日",
          title: "[国际商务区]荣安·沁樾庄17450元/㎡",
        },
      ],
    };
  },
  async created() {
    var { data } = await Getproperties();
    data = data.map((item) => {
      return {
        title: item.title + item.price,
        time: item.created_at,
      };
    });
    this.titlecalendarlist = data;
  },
};
</script>

<style lang="less" scoped>
.calendar {
  width: 150px;
  height: 250px;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(20, 20, 20, 0.2);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
.content {
   z-index: 9999999999999;
  background-color: #f8f8f8;
  position: fixed;
  top: 187px;
  left: 0;
}
.el-steps--vertical {
  width: 130px;
  height: 500px;
}
.tops {
  text-align: center;
  color: #45c3b8;
  line-height: 50px;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.tops > div > span { 
  color: #aaa;
  font-size: 12px;
}
/deep/.el-step__title{
   color: #45c3b8;
}
/deep/.el-step__icon{
     color: #45c3b8;
}
/deep/.el-step__icon-inner{
     color: #45c3b8;
}
/deep/.el-step__line{
    background-color:  #45c3b8;
}
/deep/.el-step__icon.is-text {
    border: 2px solid #45c3b8;
}
/deep/.el-step__main .is-finish{
     color: #45c3b8;
}
</style>